<template>
  <div class="scrollbar-wrapper">
    <div class="Menu_updatePwd">
      <el-button type="primary" size="small">修改密码</el-button>
    </div>
    <el-aside class="Menu" width="275px">
      <ul class="Menu_list">
        <template v-for="(item, key) in menus">
          <li @click="toggleOpenStatus(key)" class="Menu_item" v-if="!item.children||item.children.length === 0" :key="key">
            <nuxt-link :to="item.path" active-class="Menu_item_open" class="Menu_item_title">
              <span class="Menu_name">{{item.name}}</span>
            </nuxt-link>
          </li>
          <li v-if="item.children&&item.children.length > 0" :key="key" class="Menu_item_box">
            <div @click="toggleOpenStatus(key)" class="Menu_item">
              <div class="Menu_item_title" :class="{'Menu_item_open': $route.path.indexOf(item.path)>-1}">
                <span class="Menu_name">{{item.name}}</span>
                <img src="~/static/images/button_right_default.png" alt="" class="Menu_icon" :class="{rotate90:item.isOpen}">
              </div>
            </div>
            <ul class="Menu_sub_list" :style="{height: item.isOpen ? item.children.length * 64 + 'px' : 0}">
              <li class="Menu_item" v-for="(subitem, index) in item.children" :key="index">
                <nuxt-link exact-active-class="Menu_item_active" class="Menu_item_title" :to="subitem.path">{{subitem.name}}</nuxt-link>
              </li>
            </ul>
          </li>
        </template>
      </ul>
    </el-aside>
  </div>
</template>

<script>
export default {
  methods: {
    toggleOpenStatus(key) {
      const item = this.menus[key]
      item.isOpen = !item.isOpen
      if (item.children.length === 0) return
      let isInclude = false
      item.children.map(route => {
        console.log(this.$route.path)
        console.log(route.path)
        if (this.$route.path == route.path) {
          return isInclude = true
        }
      })
      if (isInclude) return
      this.$router.push(item.children[0].path)
    }
  },
  data() {
    return {
      menus: [
        {
          name: '注册审核',
          path: '/registcheck/',
          children: [],
          isOpen: false,
          isActive: false
        },
        {
          name: '供应商管理',
          path: '/supply_manage/',
          children: [
            {
              name: '供应商列表',
              path: '/supply_manage',
              isActive: false
            },
            {
              name: '设置供应商',
              path: '/supply_manage/supplySet/0',
              isActive: false
            }
          ],
          isOpen: false,
          isActive: false
        },
        {
          name: '财务收支',
          path: '/finance',
          children: [
            {
              name: '财务数据',
              path: '/finance/financeData',
              isActive: false
            },
            {
              name: '商品数据',
              path: '/finance/goodsData',
              isActive: false
            },
            {
              name: '用户数据',
              path: '/finance/consumerData',
              isActive: false
            },
            {
              name: '类目报表',
              path: '/finance/categoryData',
              isActive: false
            },
            {
              name: '品牌数据',
              path: '/finance/brandData',
              isActive: false
            },
            {
              name: '地区报表',
              path: '/finance/aeraData',
              isActive: false
            }
          ],
          isOpen: true,
          isActive: false
        },
        {
          name: '分类设置',
          path: '/sort/',
          children: [
            {
              name: '平台分类',
              path: '/sort/platform',
              isActive: false
            },
            {
              name: '主推分类',
              path: '/sort/main',
              isActive: false
            },
          ],
          isOpen: true,
          isActive: false
        },
        {
          name: '广告管理',
          path: '/advertising/menager',
          children: [],
          isOpen: false,
          isActive: false
        },
        {
          name: '新闻管理',
          path: '/news/',
          children: [],
          isOpen: false,
          isActive: false
        },
        {
          name: '权限管理',
          path: '/permission',
          children: [
            {
              name: '用户管理',
              path: '/permission/edituser',
              isActive: false
            },
            {
              name: '角色管理',
              path: '/permission/grouppower',
              isActive: false
            },
          ],
          isOpen: true,
          isActive: false
        },
        // {
        //   name: '品牌管理',
        //   path: '/brand/',
        //   children: [],
        //   isOpen: false,
        //   isActive: false
        // },
        // {
        //   name: '活动管理',
        //   path: '/active/',
        //   children: [],
        //   isOpen: false,
        //   isActive: false
        // },
        // {
        //   name: '菜单管理',
        //   path: '/menu/',
        //   children: [
        //     {
        //       name: '管理端菜单',
        //       path: '/menu/webMenu',
        //       isActive: false
        //     },
        //     {
        //       name: '供应端菜单',
        //       path: '/menu/supplyMenu',
        //       isActive: false
        //     },
        //   ],
        //   isOpen: true,
        //   isActive: false
        // },
      ]
    }
  },
}
</script>

<style lang="scss" scoped>
.scrollbar-wrapper {
  border-right: 1px solid #d1d1d1;
  padding-bottom: 102px;
  height: 100%;
  position: relative;
  background-color: #fff;
  & /deep/ {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}
.scrollbar-wrapper-bottom {
  width: 200px;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  text-align: center;
  padding-top: 10px;
}
.Menu {
  height: 100%;
  text-align: center;
  user-select: none;
  &_list {
    list-style: none;
    width: 153px;
    margin: 0 auto;
  }
  &_item {
    padding-top: 12px;
    padding-bottom: 12px;
    cursor: pointer;
    &_title {
      display: block;
      height: 40px;
      line-height: 40px;
      border-radius: 20px;
      transition: all 500ms;
      color: #333856;
      font-size: 16px;
    }
    &_active {
      color: #409eff;
      .Menu_icon {
        border-color: #409eff;
      }
    }
    &_open {
      color: #409eff;
      background-color: #d9e9fc;
    }
  }
  &_sub_list {
    list-style: none;
    padding-left: 20px;
    transition: height 600ms;
    overflow: hidden;
  }
  &_icon {
    margin-left: 10px;
    margin-right: -20px;
  }
  &_name {
    display: inline-block;
    vertical-align: middle;
  }
  &_updatePwd {
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    width: 258px;
    padding: 35px 0;
    background: #fff;
    bottom: 0;
    .el-button--primary {
      background-color: #409eff;
      border-color: #409eff;
    }
  }
}
</style>
